<template>
  <div class="wrapper">
    <div class="half">
      <h4>Road</h4>
      <div id="roadMap" class="map"></div>
    </div>
    <div class="half">
      <h4>Aerial</h4>
      <div id="aerialMap" class="map"></div>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import View from 'ol/View'
import XYZ from 'ol/source/XYZ'
export default {
  name: 'index',
  data () {
    return {}
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      const roadLayer = new TileLayer({
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png',
          tileSize: 512,
          maxZoom: 22
        })
      })

      const aerialLayer = new TileLayer({
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png',
          maxZoom: 20
        })
      })
      // 共同的view对象才能联动视图
      const view = new View({
        center: [0, 0],
        zoom: 6
      })
      // eslint-disable-next-line
      const map1 = new Map({
        target: 'roadMap',
        layers: [roadLayer],
        view: view
      })
      // eslint-disable-next-line
      const map2 = new Map({
        target: 'aerialMap',
        layers: [aerialLayer],
        view: view
      })
    }
  }
}
</script>

<style scoped>
  .map {
    width: 100%;
    height:400px;
  }
  @media (min-width: 800px) {
    .wrapper {
      display: flex;
    }
    .half {
      padding: 0 10px;
      width: 50%;
      float: left;
    }
  }
</style>
